<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面</title>
    <script src="./js/vue.global.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/qs.min.js"></script>
    <script>
        
    </script>
</head>
<body>
    <div id="app">
        <form>
            用户名<input type="text" v-model="userObj.username">
            密码<input type="password" v-model="userObj.password">
            电话号码<input type="text" v-model="userObj.telephone">
            <button @click.prevent="onRegisterClick">注册</button>
        </form>
        
    </div>
    <script>
        const vm = Vue.createApp({
            data(){
                return {
                    userObj:{
                        username: "",
                        password: "",
                        telephone: "",
                        othermessage: ""
                    }
                }
            },
            methods:{
                onRegisterClick() {
                    //逻辑判断,输入的用户名和密码是否符合要求等

                    //vue中通过axios给服务器传消息
                    axios({
                        method:"post",
                        // url:"http://localhost:8080/toregister",
                        url:"https://3098l4z890.picp.vip/toregister",
                        data:Qs.stringify({         //需要通过Qs的stringify转成formdata的形式
                            "userName":this.userObj.username,       //model绑定的username
                            "password":this.userObj.password,       //model绑定的password
                            "telephone":this.userObj.telephone,     //model绑定的telephone
                        }),
                        responseType: "json",
                    }).then(function(info) {
                        if(info.data.success){
                            alert("注册成功,即将前往登录界面");
                            //跳转功能实现
                        }else{
                            alert("注册失败，用户名已存在");
                            //清空注册框
                        }
                    }).catch(function(error) {
                        console.log(error);
                    })
                }
            }
        }).mount("#app");
    </script>

</body>
</html>